<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>滑动拼图验证码</title>
    <style>
      .container {
        width: 310px;
        margin: 100px auto;
      }
      input {
        display: block;
        width: 290px;
        line-height: 40px;
        margin: 10px 0;
        padding: 0 10px;
        outline: none;
        border: 1px solid #c8cccf;
        border-radius: 4px;
        color: #6a6f77;
      }
      #msg {
        width: 100%;
        line-height: 40px;
        font-size: 14px;
        text-align: center;
      }
      a:link,
      a:visited,
      a:hover,
      a:active {
        margin-left: 100px;
        color: #0366d6;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div id="captcha"></div>
      <div id="msg"></div>
    </div>
    <script>
      if (!window.SliderVerify) {
        document.write('<script src="./dist/SliderVerify.min.js"><\/script>');
      }
    </script>
    <script>
      SliderVerify.init({
        el: document.getElementById("captcha"),
        onSuccess: function () {
          document.getElementById("msg").innerHTML = "登录成功！";
        },
        onFail: cleanMsg,
        onRefresh: cleanMsg,
      });
      function cleanMsg() {
        document.getElementById("msg").innerHTML = "";
      }
    </script>
  </body>
</html>
